'use client'

import { Button } from "antd";
import { useEffect, useRef, useState } from "react";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/css/pagination';
import './wg1.css';

const slides = [
  {
    title: (
      <>
        协同白衣使者<br />开创健康未来
      </>
    ),
    subtitle: 'Your Health We Care',
    bgClass: 'sw1',
  },
  {
    title: (
      <>
        致力于成为中国最强、国际一流<br />
        最受人尊敬的医疗器械和医药创新型企业
      </>
    ),
    subtitle:
      'To Be The Strongest In China, Best-In-Class Globally\nThe Most Respected Innovative Medical Devices And Pharmaceutical Company',
    bgClass: 'sw2',
  },
  {
    title: (
      <>
        满足并努力超越顾客的<br />
        最大需求
      </>
    ),
    subtitle: "Meet And Strive To Exceed The Customer's Greatest Needs",
    bgClass: 'sw3',
  },
];
const WG1View: React.FC = () => {
   
   const [activeIndex, setActiveIndex] = useState(0);
  const swiperRef = useRef<any>(null);

  // 强制刷新分页器
  useEffect(() => {
    if (swiperRef.current && swiperRef.current.swiper && swiperRef.current.swiper.pagination) {
      swiperRef.current.swiper.pagination.render();
      swiperRef.current.swiper.pagination.update();
    }
  }, [activeIndex]);

  return (
    <div className="weiGao-ant-wrapper">
      {/* 右边竖线 */}
      <div className="TopClassBorder" />
      {/* 底部白线 */}
      <div className="TopClassBorderBotton" />

      <Swiper
        ref={swiperRef}
        pagination={{
          clickable: true,
          clickableClass: 'my-pagination-clickable',
          renderBullet: (index, className) => {
            if (activeIndex === index) {
              return `<span class="${className}">
                <div class="ClassOne">
                  <div>${index + 1}</div>
                  <div class="ClassList"></div>
                </div>
              </span>`;
            }
            return `<span class="${className}">${index + 1}</span>`;
          },
        }}
        modules={[Pagination]}
        onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
        className="WeGao1Swiper"
      >
        {slides.map((slide, idx) => (
          <SwiperSlide key={idx}>
            <div className={`slide-content ${slide.bgClass}`}>
              {activeIndex === idx && (
                <div className="Title">
                  <div className="Title1">{slide.title}</div>
                  <div className="Title2">{slide.subtitle}</div>
                  <Button
                    type="default"
                    className="TitleButton"
                    shape="round"
                    size="large"
                    style={{ color: 'white', borderColor: 'white', background: 'transparent' }}
                  >
                    探索威高
                    <svg
                      className="icon"
                      viewBox="0 0 23 10"
                      xmlns="http://www.w3.org/2000/svg"
                      width="2rem"
                      height="1rem"
                      style={{ marginLeft: '0.5rem' }}
                    >
                      <path
                        className="iconPath"
                        strokeLinecap="round"
                        stroke="white"
                        strokeWidth="1.52941"
                        d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                      />
                    </svg>
                  </Button>
                </div>
              )}
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
    );
};

export default WG1View;